import React from 'react';
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import type { ProFormColumnsType } from "@ant-design/pro-components";
import SearchForm from '../SearchForm';
import EditableTable from '../EditableTable';
import type { FormInstance } from 'antd';

/**
 * 表格与搜索组合组件的属性类型
 * @template T - 数据类型
 * @template P - 搜索参数类型
 */
export interface TableWithSearchProps<T, P = Partial<T>> {
  /** 表格列配置 */
  columns: ProColumns<T>[];
  /** 搜索表单列配置 */
  searchColumns: ProFormColumnsType<P>[];
  /** 表格数据源 */
  dataSource: T[];
  /** 表格加载状态 */
  loading?: boolean;
  /** 表格行的key */
  rowKey: string;
  /** 表格的ref */
  actionRef?: React.MutableRefObject<ActionType | undefined>;
  /** 表单的ref */
  formRef?: React.MutableRefObject<FormInstance | undefined>;
  /** 可编辑的行key数组 */
  editableKeys: React.Key[];
  /** 设置可编辑行的回调 */
  setEditableRowKeys: (keys: React.Key[]) => void;
  /** 分页配置 */
  pagination: {
    total: number;
    pageSize: number;
    current: number;
    onChange: (page: number, pageSize: number) => void;
  };
  /** 搜索表单提交回调 */
  onSearch: (values: P) => Promise<boolean>;
  /** 搜索表单重置回调 */
  onReset?: () => void;
  /** 新建记录的默认值 */
  createRecordTemplate?: () => Partial<T>;
  /** 保存编辑的回调 */
  onSave?: (key: React.Key, row: T) => Promise<boolean>;
}

/**
 * 表格与搜索组合组件
 * @template T - 数据类型
 * @template P - 搜索参数类型
 */
const TableWithSearch = <T extends Record<string, any>, P = Partial<T>>(
  props: TableWithSearchProps<T, P>
) => {
  const {
    columns,
    searchColumns,
    dataSource,
    loading,
    rowKey,
    actionRef,
    formRef,
    editableKeys,
    setEditableRowKeys,
    pagination,
    onSearch,
    onReset,
    createRecordTemplate,
    onSave,
  } = props;

  return (
    <div>
      <SearchForm<P>
        columns={searchColumns}
        onFinish={onSearch}
        onReset={onReset}
      />
      <EditableTable<T>
        columns={columns}
        dataSource={dataSource}
        loading={loading}
        rowKey={rowKey}
        actionRef={actionRef}
        formRef={formRef}
        editableKeys={editableKeys}
        setEditableRowKeys={setEditableRowKeys}
        pagination={pagination}
        createRecordTemplate={createRecordTemplate}
        onSave={onSave}
      />
    </div>
  );
};

export default TableWithSearch; 